<template>
  <div class="list">
    <ul>
      <li>
        <div class="type">类型</div>
        <div class="addres">地址</div>
      </li>
      <li v-for="item in tableData" :key="item.id">
        <div class="type">{{ item.type }}</div>
        <div class="addres">
          <n-input
            v-if="isEdit"
            v-model:value="item.address"
            type="text"
            placeholder="请输入地址"
            title="使用（回车/Enter）提交内容"
            @keydown.enter="submitAddres"
          />
          <span v-else> {{ item.address }}</span>
          <n-icon v-if="!isEdit" class="edit" @click="editClick(item)">
            <IconEdit />
          </n-icon>
          <n-icon v-else class="close" @click="closeClick(item)">
            <IconClose />
          </n-icon>
        </div>
      </li>
    </ul>
  </div>
</template>
<script lang='ts' setup>
import { NInput,NIcon,  useMessage } from 'naive-ui'
import { IconEdit, IconClose } from '@/icons'
import { typeApi } from '@/api/system'
import { _ } from 'iking-utils'
const nMessage = useMessage()
const isEdit = ref<boolean>(false)
const editData = ref<any>()
const tableData = ref<any[]>([])
const cloneText = ref<string>('')
const getList = async ()=>{
  tableData.value = []
  const { success,data,msg } = await typeApi.getList('dataV')
  if(success){
    tableData.value.push({
      id:data.id,
      type:data.type,
      address:data.properties? JSON.parse(data.properties)?.fileUrl:'',
    })
  }else{
    console.error(msg)
  }
}
getList()

const editClick = (item:any)=>{
  cloneText.value = item.address
  editData.value = item
  isEdit.value = true
}
const submitAddres = async ()=>{
  const parasm = {
    id:editData.value.id,
    type:editData.value.type,
    properties: JSON.stringify({ fileUrl:editData.value.address }),
  }
  const { success,msg } = await typeApi.edit(parasm)
  if(success){
    nMessage.success(msg)
    isEdit.value = false
  }else{
    nMessage.error(msg)
  }
}
const closeClick = (item:any)=>{
  item.address = cloneText.value
  isEdit.value = false
}

</script>
<style lang="scss" scoped>
.list{
    width: 100%;
    height: auto;
    background-color: #17191c;
    ul{
        width: 100%;
        border: 1px solid rgba(255, 255, 255,0.1);
        li{
            width: 100%;
            display: flex;
            height: 56px;
            line-height: 56px;
            font-size: 14px;
            cursor: pointer;
            padding: 0 16px;
            background-color: rgb(24, 24, 28);
            border-bottom: 1px solid rgba(255, 255, 255,0.1);
            &:hover{
                background-color: rgba(38, 38, 42, 0.992);
            }
            .type{
                width: 50%;
                margin-right: 16px;
            }
            .addres{
                flex: 1;
                padding-right: 25px;
                overflow: hidden;
                text-overflow: ellipsis;
                position: relative;
                white-space: nowrap;
                .close,.edit{
                    position: absolute;
                    right: 0;
                    top:0;
                    margin:  20px 0;
                }
                .edit{
                    &:hover{
                        color: rgb(38, 129, 255);
                    }
                }
                .close{
                    &:hover{
                        color: red;
                    }
                }
            }
            &:nth-child(1){
                height: 46px;
                line-height: 46px;
                background-color:rgb(45, 45, 48) !important ;
            }
            &:last-child{
                border-bottom:none;
            }

        }
    }
}
</style>
